<template>
  <div id="app">
    <div class="db1">
      <van-nav-bar
        title="我的偏好设置"
        right-text="清空"
        left-arrow
          @click-left="$router.push('/home/mine')"
        @click-right="onClickRight"
      />
      <van-notice-bar
        class="top"
     
        left-icon="volume-o"
        text="已经选择的偏好: 附近的1km,收藏的电站优先(3km内)"
      />
    </div>
    <div class="jlw">
      <span>距离我</span>
    </div>
    <div class="container">
      <div class="f1">
        <ul class="ul1">
          <li
            @click="toggle1 = !toggle1"
            :style="{
              color: toggle1 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle1 ? '#f0fbfd' : 'white',
              'border-color': toggle1 ? '#f0fbfd' : 'grey',
            }"
          >
            1km
          </li>
          <li
            @click="toggle2 = !toggle2"
            :style="{
              color: toggle2 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle2 ? '#f0fbfd' : 'white',
              'border-color': toggle2 ? '#f0fbfd' : 'grey',
            }"
          >
            2km
          </li>
          <li
            @click="toggle3 = !toggle3"
            :style="{
              color: toggle3 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle3 ? '#f0fbfd' : 'white',
              'border-color': toggle3 ? '#f0fbfd' : 'grey',
            }"
          >
            3km
          </li>
          <li
            @click="toggle4 = !toggle4"
            :style="{
              color: toggle4 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle4 ? '#f0fbfd' : 'white',
              'border-color': toggle4 ? '#f0fbfd' : 'grey',
            }"
          >
            5km
          </li>
          <li
            @click="toggle5 = !toggle5"
            :style="{
              color: toggle5 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle5 ? '#f0fbfd' : 'white',
              'border-color': toggle5 ? '#f0fbfd' : 'grey',
            }"
          >
            10km
          </li>
          <li
            @click="toggle6 = !toggle6"
            :style="{
              color: toggle6 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle6 ? '#f0fbfd' : 'white',
              'border-color': toggle6 ? '#f0fbfd' : 'grey',
            }"
          >
            20km
          </li>
          <li
            @click="toggle7 = !toggle7"
            :style="{
              color: toggle7 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle7 ? '#f0fbfd' : 'white',
              'border-color': toggle7 ? '#f0fbfd' : 'grey',
            }"
          >
            30km
          </li>
          <li
            @click="toggle8 = !toggle8"
            :style="{
              color: toggle8 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle8 ? '#f0fbfd' : 'white',
              'border-color': toggle8 ? '#f0fbfd' : 'grey',
            }"
          >
            50km
          </li>
          <li
            @click="toggle9 = !toggle9"
            :style="{
              color: toggle9 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle9 ? '#f0fbfd' : 'white',
              'border-color': toggle9 ? '#f0fbfd' : 'grey',
            }"
          >
            100km
          </li>
          <li
            @click="toggle10 = !toggle10"
            :style="{
              color: toggle10 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle10 ? '#f0fbfd' : 'white',
              'border-color': toggle10 ? '#f0fbfd' : 'grey',
            }"
          >
            200km
          </li>
        </ul>
      </div>
      <span>绑定车型,更精准地帮你找到合适的电站</span>
      <div class="f2">
        <span>
          <img src="/img/xjc.png" alt="" />
          <a href="#">添加爱车,查看车型适配情况</a>>
        </span>
      </div>
      <div class="f3">
        <van-checkbox-group v-model="result" direction="horizontal">
          <van-checkbox v-model="checked" disabled>我的车型优先</van-checkbox>
          <van-checkbox v-model="checked" checked-color="blue"
            >我收藏的电站优先(3km内)</van-checkbox
          >
        </van-checkbox-group>
      </div>
      <div class="f4">
        <span>电站星级</span>
        <ul class="ul2">
          <li
            @click="toggle11 = !toggle11"
            :style="{
              color: toggle11 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle11 ? '#f0fbfd' : 'white',
              'border-color': toggle11 ? '#f0fbfd' : 'grey',
            }"
          >
            三星
          </li>
          <li
            @click="toggle12 = !toggle12"
            :style="{
              color: toggle12 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle12 ? '#f0fbfd' : 'white',
              'border-color': toggle12 ? '#f0fbfd' : 'grey',
            }"
          >
            四星
          </li>
          <li
            @click="toggle13 = !toggle13"
            :style="{
              color: toggle13 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle13 ? '#f0fbfd' : 'white',
              'border-color': toggle13 ? '#f0fbfd' : 'grey',
            }"
          >
            五星
          </li>
        </ul>
      </div>
      <div class="f5">
        <span>权益</span>
        <ul class="ul3">
          <li
            @click="toggle14 = !toggle14"
            :style="{
              color: toggle14 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle14 ? '#f0fbfd' : 'white',
              'border-color': toggle14 ? '#f0fbfd' : 'grey',
            }"
          >
            特来电权益
          </li>
          <li
            @click="toggle15 = !toggle15"
            :style="{
              color: toggle15 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle15 ? '#f0fbfd' : 'white',
              'border-color': toggle15 ? '#f0fbfd' : 'grey',
            }"
          >
            即插即充
          </li>
        </ul>
      </div>
      <div class="f6">
        <span>电站服务</span>
        <ul class="ul4">
          <li
            @click="toggle16 = !toggle16"
            :style="{
              color: toggle16 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle16 ? '#f0fbfd' : 'white',
              'border-color': toggle16 ? '#f0fbfd' : 'grey',
            }"
          >
            充电专用车位
          </li>
          <li
            @click="toggle17 = !toggle17"
            :style="{
              color: toggle17 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle17 ? '#f0fbfd' : 'white',
              'border-color': toggle17 ? '#f0fbfd' : 'grey',
            }"
          >
            专人值守
          </li>
          <li
            @click="toggle18 = !toggle18"
            :style="{
              color: toggle18 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle18 ? '#f0fbfd' : 'white',
              'border-color': toggle18 ? '#f0fbfd' : 'grey',
            }"
          >
            专人道闸
          </li>
          <li
            @click="toggle19 = !toggle19"
            :style="{
              color: toggle19 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle19 ? '#f0fbfd' : 'white',
              'border-color': toggle19 ? '#f0fbfd' : 'grey',
            }"
          >
            洗手间
          </li>
          <li
            @click="toggle20 = !toggle20"
            :style="{
              color: toggle20 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle20 ? '#f0fbfd' : 'white',
              'border-color': toggle20 ? '#f0fbfd' : 'grey',
            }"
          >
            休息室
          </li>
          <li
            @click="toggle21 = !toggle21"
            :style="{
              color: toggle21 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle21 ? '#f0fbfd' : 'white',
              'border-color': toggle21 ? '#f0fbfd' : 'grey',
            }"
          >
            便利店
          </li>
          <li
            @click="toggle22 = !toggle22"
            :style="{
              color: toggle22 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle22 ? '#f0fbfd' : 'white',
              'border-color': toggle22 ? '#f0fbfd' : 'grey',
            }"
          >
            简餐
          </li>
          <li
            @click="toggle23 = !toggle23"
            :style="{
              color: toggle23 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle23 ? '#f0fbfd' : 'white',
              'border-color': toggle23 ? '#f0fbfd' : 'grey',
            }"
          >
            洗车服务
          </li>
          <li
            @click="toggle24 = !toggle24"
            :style="{
              color: toggle24 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle24 ? '#f0fbfd' : 'white',
              'border-color': toggle24 ? '#f0fbfd' : 'grey',
            }"
          >
            室内
          </li>
          <li
            @click="toggle25 = !toggle25"
            :style="{
              color: toggle25 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle25 ? '#f0fbfd' : 'white',
              'border-color': toggle25 ? '#f0fbfd' : 'grey',
            }"
          >
            雨棚
          </li>
          <li
            @click="toggle26 = !toggle26"
            :style="{
              color: toggle26 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle26 ? '#f0fbfd' : 'white',
              'border-color': toggle26 ? '#f0fbfd' : 'grey',
            }"
          >
            场站照明
          </li>
        </ul>
      </div>
      <div class="f7">
        <span>电站类型</span>
        <ul class="ul5">
          <li
            @click="toggle27 = !toggle27"
            :style="{
              color: toggle27 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle27 ? '#f0fbfd' : 'white',
              'border-color': toggle27 ? '#f0fbfd' : 'grey',
            }"
          >
            对外开放
          </li>
          <li
            @click="toggle28 = !toggle28"
            :style="{
              color: toggle28 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle28 ? '#f0fbfd' : 'white',
              'border-color': toggle28 ? '#f0fbfd' : 'grey',
            }"
          >
            不对外开放
          </li>
        </ul>
      </div>
      <div class="f8">
        <span>充电方式</span>
        <ul class="ul6">
          <li
            @click="toggle29 = !toggle29"
            :style="{
              color: toggle29 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle29 ? '#f0fbfd' : 'white',
              'border-color': toggle29 ? '#f0fbfd' : 'grey',
            }"
          >
            直流快充
          </li>
          <li
            @click="toggle30 = !toggle30"
            :style="{
              color: toggle30 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle30 ? '#f0fbfd' : 'white',
              'border-color': toggle30 ? '#f0fbfd' : 'grey',
            }"
          >
            直流慢充
          </li>
          <li
            @click="toggle31 = !toggle31"
            :style="{
              color: toggle31 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle31 ? '#f0fbfd' : 'white',
              'border-color': toggle31 ? '#f0fbfd' : 'grey',
            }"
          >
            超级快充
          </li>
          <li
            @click="toggle32 = !toggle32"
            :style="{
              color: toggle32 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle32 ? '#f0fbfd' : 'white',
              'border-color': toggle32 ? '#f0fbfd' : 'grey',
            }"
          >
            交流快充
          </li>
          <li
            @click="toggle33 = !toggle33"
            :style="{
              color: toggle33 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle33 ? '#f0fbfd' : 'white',
              'border-color': toggle33 ? '#f0fbfd' : 'grey',
            }"
          >
            交流慢充
          </li>
        </ul>
      </div>
      <div class="f9">
        <span>电站状态</span>
        <ul class="ul7">
          <li
            @click="toggle34 = !toggle34"
            :style="{
              color: toggle34 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle34 ? '#f0fbfd' : 'white',
              'border-color': toggle34 ? '#f0fbfd' : 'grey',
            }"
          >
            空闲
          </li>
        </ul>
      </div>
      <div class="f10">
        <span>运营类型</span>
        <ul class="ul8">
          <li
            @click="toggle35 = !toggle35"
            :style="{
              color: toggle35 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle35 ? '#f0fbfd' : 'white',
              'border-color': toggle35 ? '#f0fbfd' : 'grey',
            }"
          >
            自营
          </li>
          <li
            @click="toggle36 = !toggle36"
            :style="{
              color: toggle36 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle36 ? '#f0fbfd' : 'white',
              'border-color': toggle36 ? '#f0fbfd' : 'grey',
            }"
          >
            非自营
          </li>
          <li
            @click="toggle37 = !toggle37"
            :style="{
              color: toggle37 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle37 ? '#f0fbfd' : 'white',
              'border-color': toggle37 ? '#f0fbfd' : 'grey',
            }"
          >
            互联网
          </li>
        </ul>
      </div>
      <div class="f11">
        <span>停车费</span>
        <ul class="ul9">
          <li
            @click="toggle38 = !toggle38"
            :style="{
              color: toggle38 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle38 ? '#f0fbfd' : 'white',
              'border-color': toggle38 ? '#f0fbfd' : 'grey',
            }"
          >
            免费·现时免费
          </li>
          <li
            @click="toggle39 = !toggle39"
            :style="{
              color: toggle39 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle39 ? '#f0fbfd' : 'white',
              'border-color': toggle39 ? '#f0fbfd' : 'grey',
            }"
          >
            收藏
          </li>
        </ul>
      </div>
      <div class="f12">
        <span>停车场</span>
        <ul class="ul10">
          <li
            @click="toggle40 = !toggle40"
            :style="{
              color: toggle40 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle40 ? '#f0fbfd' : 'white',
              'border-color': toggle40 ? '#f0fbfd' : 'grey',
            }"
          >
            露天
          </li>
          <li
            @click="toggle41 = !toggle41"
            :style="{
              color: toggle41 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle41 ? '#f0fbfd' : 'white',
              'border-color': toggle41 ? '#f0fbfd' : 'grey',
            }"
          >
            非露天
          </li>
          <li
            @click="toggle42 = !toggle42"
            :style="{
              color: toggle42 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle42 ? '#f0fbfd' : 'white',
              'border-color': toggle42 ? '#f0fbfd' : 'grey',
            }"
          >
            地上
          </li>
          <li
            @click="toggle43 = !toggle43"
            :style="{
              color: toggle43 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle43 ? '#f0fbfd' : 'white',
              'border-color': toggle43 ? '#f0fbfd' : 'grey',
            }"
          >
            地下
          </li>
        </ul>
      </div>
      <div class="f13">
        <span>智能地锁</span>
        <ul class="ul11">
          <li
            @click="toggle44 = !toggle44"
            :style="{
              color: toggle44 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle44 ? '#f0fbfd' : 'white',
              'border-color': toggle44 ? '#f0fbfd' : 'grey',
            }"
          >
            有地锁
          </li>
          <li
            @click="toggle45 = !toggle45"
            :style="{
              color: toggle45 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle45 ? '#f0fbfd' : 'white',
              'border-color': toggle45 ? '#f0fbfd' : 'grey',
            }"
          >
            车位空闲(仅支持能感应车辆的车位)
          </li>
        </ul>
      </div>
      <div class="f14">
        <span>预约充电</span>
        <ul class="ul12">
          <li
            @click="toggle46 = !toggle46"
            :style="{
              color: toggle46 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle46 ? '#f0fbfd' : 'white',
              'border-color': toggle46 ? '#f0fbfd' : 'grey',
            }"
          >
            可预约
          </li>
        </ul>
      </div>
      <div class="f15">
        <span>先充后付</span>
        <ul class="ul13">
          <li
            @click="toggle47 = !toggle47"
            :style="{
              color: toggle47 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle47 ? '#f0fbfd' : 'white',
              'border-color': toggle47 ? '#f0fbfd' : 'grey',
            }"
          >
            芝麻信用·免充值
          </li>
          <li
            @click="toggle48 = !toggle48"
            :style="{
              color: toggle48 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle4 ? '#f0fbfd' : 'white',
              'border-color': toggle48 ? '#f0fbfd' : 'grey',
            }"
          >
            微信支付分·免充值
          </li>
        </ul>
      </div>
      <div class="f16">
        <span>高速模式</span>
        <ul class="ul14">
          <li
            @click="toggle49 = !toggle49"
            :style="{
              color: toggle49 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle49 ? '#f0fbfd' : 'white',
              'border-color': toggle49 ? '#f0fbfd' : 'grey',
            }"
          >
            高速路充电桩
          </li>
          <li
            @click="toggle50 = !toggle50"
            :style="{
              color: toggle50 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle50 ? '#f0fbfd' : 'white',
              'border-color': toggle50 ? '#f0fbfd' : 'grey',
            }"
          >
            靠近高速路的充电桩
          </li>
        </ul>
      </div>
      <div class="f17">
        <span>营业时间</span>
        <ul class="ul15">
          <li
            @click="toggle51 = !toggle51"
            :style="{
              color: toggle51 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle51 ? '#f0fbfd' : 'white',
              'border-color': toggle51 ? '#f0fbfd' : 'grey',
            }"
          >
            营业中
          </li>
          <li
            @click="toggle52 = !toggle52"
            :style="{
              color: toggle52 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle52 ? '#f0fbfd' : 'white',
              'border-color': toggle52 ? '#f0fbfd' : 'grey',
            }"
          >
            24小时
          </li>
          <li
            @click="toggle53 = !toggle53"
            :style="{
              color: toggle53 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle53 ? '#f0fbfd' : 'white',
              'border-color': toggle53 ? '#f0fbfd' : 'grey',
            }"
          >
            时间不确定
          </li>
        </ul>
      </div>
      <div class="f18">
        <span>充电接口</span>
        <ul class="ul16">
          <li
            @click="toggle54 = !toggle54"
            :style="{
              color: toggle54 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle54 ? '#f0fbfd' : 'white',
              'border-color': toggle54 ? '#f0fbfd' : 'grey',
            }"
          >
            国际2011
          </li>
          <li
            @click="toggle55 = !toggle55"
            :style="{
              color: toggle55 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle55 ? '#f0fbfd' : 'white',
              'border-color': toggle55 ? '#f0fbfd' : 'grey',
            }"
          >
            国际2015
          </li>
        </ul>
      </div>
      <div class="f19">
        <span>辅源类型(仅适用于直流快充)</span>
        <ul class="ul17">
          <li
            @click="toggle56 = !toggle56"
            :style="{
              color: toggle56 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle56 ? '#f0fbfd' : 'white',
              'border-color': toggle56 ? '#f0fbfd' : 'grey',
            }"
          >
            12V
          </li>
          <li
            @click="toggle57 = !toggle57"
            :style="{
              color: toggle57 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle57 ? '#f0fbfd' : 'white',
              'border-color': toggle57 ? '#f0fbfd' : 'grey',
            }"
          >
            24V
          </li>
        </ul>
      </div>
      <div class="f20">
        <span>电压(仅适用于直流快充)</span>
        <ul class="ul18">
          <li
            @click="toggle58 = !toggle58"
            :style="{
              color: toggle58 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle58 ? '#f0fbfd' : 'white',
              'border-color': toggle58 ? '#f0fbfd' : 'grey',
            }"
          >
            200V-500V
          </li>
          <li
            @click="toggle59 = !toggle59"
            :style="{
              color: toggle59 ? 'rgb(48, 197, 222)' : 'black',
              'background-color': toggle59 ? '#f0fbfd' : 'white',
              'border-color': toggle59 ? '#f0fbfd' : 'grey',
            }"
          >
            700V及以上
          </li>
        </ul>
      </div>
      <div class="f21">
        <span>查看最低功率15kW-360kW的充电站(适用于直流快充)</span>
        <div class="zj">
          <van-slider class="ht" v-model="value" range @change="onChange" />
        </div>
      </div>

      <div class="db2">
        <span
          >保存后,按照您设置的偏好进行电站搜索/一键导航/显示首页推荐电站</span
        >
        <button @click="save">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
      
export default {
  data() {
    return {
      distance: [
        "1km",
        "2km",
        "3km",
        "5km",
        "10km",
        "20km",
        "30km",
        "50km",
        "100km",
        "200km",
      ],
      result: [],
      checked: "",
      value: [15, 360],
      toggle1: false,
      toggle2: false,
      toggle3: false,
      toggle4: false,
      toggle5: false,
      toggle6: false,
      toggle7: false,
      toggle8: false,
      toggle9: false,
      toggle10: false,
      toggle11: false,
      toggle12: false,
      toggle13: false,
      toggle14: false,
      toggle15: false,
      toggle16: false,
      toggle17: false,
      toggle18: false,
      toggle19: false,
      toggle20: false,
      toggle21: false,
      toggle22: false,
      toggle23: false,
      toggle24: false,
      toggle25: false,
      toggle26: false,
      toggle27: false,
      toggle28: false,
      toggle29: false,
      toggle30: false,
      toggle31: false,
      toggle32: false,
      toggle33: false,
      toggle34: false,
      toggle35: false,
      toggle36: false,
      toggle37: false,
      toggle38: false,
      toggle39: false,
      toggle40: false,
      toggle41: false,
      toggle42: false,
      toggle43: false,
      toggle44: false,
      toggle45: false,
      toggle46: false,
      toggle47: false,
      toggle48: false,
      toggle49: false,
      toggle50: false,
      toggle51: false,
      toggle52: false,
      toggle53: false,
      toggle54: false,
      toggle55: false,
      toggle56: false,
      toggle57: false,
      toggle58: false,
      toggle59: false,
    };
  },
  methods: {
    onClickLeft() {
      // Toast('返回');
      this.$router.push("/mine");
    },
    onClickRight() {
      // Toast("清空");
      this.$router.go(0);
    },
    onChange(value) {
      Toast("当前值：" + value);
    },
    save() {
      Toast.success("保存成功");
      // duration = 200;
      this.$router.push("/mine");
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0 auto;
  padding: 0;
}
.top {
  width: 85%;
  // position: fixed;
}
.db1 {
  width: 100%;
  position: fixed;
  top: 0;
}
.jlw {
  margin-top: 25%;
  width: 100%;
  span {
    color: gray;
    font-family: "楷体";
    margin: 20px;
  }
}
.container {
  background-color: white;
  width: 98%;
  .f1 {
    padding: 10px 0px;
    .ul1 {
      width: 85%;
      // background-color: aquamarine;
      list-style: none;
      display: flex;
      display: flex;
      flex-wrap: wrap;
      li {
        border: 1px solid grey;
        border-radius: 6px;
        display: inline-block;
        padding: 5px 10px;
        margin-top: 5px;
      }
    }
  }
  span {
    display: block;
    width: 96%;
    // background-color: honeydew;
    color: gray;
    font-family: "楷体";
    margin: 10px 10px;
  }
  .f2 {
    border: 1px solid gray;
    border-radius: 10px;
    span {
      height: 60px;
      display: block;
      img {
        margin: 0px 10px;
        width: 80px;
        height: 60px;
        float: left;
      }
      a {
        line-height: 60px;
      }
    }
  }
  .f3 {
    height: 10px;
    padding: 10px;
  }
  .f4 {
    .ul2 {
      width: 80%;
      display: flex;
      padding-bottom: 10px;
      li {
        width: 60px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f5 {
    .ul3 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        width: 90px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f6 {
    padding: 10px 0px;
    .ul4 {
      width: 90%;
      // background-color: aquamarine;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      li {
        border: 1px solid grey;
        border-radius: 6px;
        display: inline-block;
        padding: 5px 10px;
        margin-top: 5px;
      }
    }
  }
  .f7 {
    .ul5 {
      width: 60%;
      display: flex;
      padding-bottom: 10px;
      li {
        width: 90px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f8 {
    padding: 10px 0px;
    .ul6 {
      width: 90%;
      // background-color: aquamarine;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      li {
        border: 1px solid grey;
        border-radius: 6px;
        display: inline-block;
        padding: 5px 10px;
        margin-top: 5px;
      }
    }
  }
  .f9 {
    padding: 10px 0px;
    .ul7 {
      width: 20%;
      // background-color: aquamarine;
      list-style: none;
      li {
        border: 1px solid grey;
        border-radius: 6px;
        display: inline-block;
        padding: 5px 10px;
        margin: 5px 5px;
      }
    }
  }
  .f10 {
    .ul8 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f11 {
    .ul9 {
      width: 100%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f12 {
    .ul10 {
      width: 80%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        // width: 70px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f13 {
    .ul11 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f14 {
    padding: 10px 0px;
    .ul12 {
      width: 30%;
      // background-color: aquamarine;
      list-style: none;
      li {
        border: 1px solid grey;
        border-radius: 6px;
        display: inline-block;
        padding: 5px 10px;
        margin: 5px 5px;
      }
    }
  }
  .f15 {
    .ul13 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f16 {
    .ul14 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f17 {
    .ul15 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f18 {
    .ul16 {
      width: 80%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f19 {
    .ul17 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f20 {
    .ul18 {
      width: 80%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        line-height: 25px;
        border: 1px solid gray;
      }
    }
  }
  .f21 {
    padding-bottom: 40%;
    .zj {
      height: 40px;
      border: 1px solid gray;
      border-radius: 20px;
      width: 90%;
      .ht {
        width: 80%;
        margin: 16px;
        height: 7px;
      }
    }
  }
  .db2 {
    position: fixed;
    bottom: 0;
    border-top: 1px solid gainsboro;
    background-color: whitesmoke;
    span {
      width: 95%;
      display: flex;
      padding-bottom: 10px;
    }
    button {
      width: 95%;
      height: 30px;
      border: 0px;
      background-color: lightseagreen;
      border-radius: 5px;
    }
  }
}
</style>